<template>
  <div class="search-bar">
    <input
        type="text"
        v-model="query"
        @input="onInput"
        placeholder="搜索..."
    />
    <div class="search-button" @click="onSearch">搜索</div>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  data() {
    return {
      query: ''
    };
  },
  methods: {
    onInput() {
      this.$emit('input', this.query);
    },
    onSearch() {
      this.$emit('search', this.query);
    }
  }
};
</script>

<style scoped>
.search-bar {
  display: flex;
  width: 60%;
  height: 60px;
  margin-left: 20%;
  margin-top: 40px;
  border-radius: 15px;
  overflow: hidden;
  padding: 3px;
  background-color: #2981e6;
}

input[type="text"] {
  padding: 30px;
  font-size: 20px;
  border: none;
  border-radius: 13px;
  outline: none;
  flex: 1;
}

.search-button {
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  outline: none;
  color: white;

}

button:hover {
  background-color: #0056b3;
}
</style>